Javascript video tutorials / lectures

Been on my summer holidays so no blogging for the last week, so whats new I bet you’re thinking – you never blog anyway.

No well, you’re right, but I have some great Javascript resources for you to watch! yes not read… watch… so sit back fire up your browser and let the information come to you.

Douglas Crockford Javascript Lectures part 1

Douglas Crockford Javascript Lectures part2

Douglas Crockford Javascript Lectures part 3

Douglas Crockford Javascript Lectures part 4

If you watch all of those, you could go on and read this:
JavaScript Tips for Novices, Acolytes, and Gurus and then explain it to me 🙂

Laters

Getting Started with Ext Js and the Zend Framework

Tutorial : Getting Started with Ext Js and the Zend Framework

Not read it yet, looks good though. Give it a scan…

Switching Tabs with Ext.TabPanels and Ext.KeyMap Keypress events

In an earlier post I did some bits with the Ext.TabPanel class. I recommend you have a read of that before checking out this post, unless you’re happy with Ext.TabPanel then I’ll show you how to switch tabs with a Ext.KeyMap class.

Ok so you tab panel is ready to rock.

You need a key map and to understand which keys map and what their codes are. Take a look here for some common key codes: http://unixpapa.com/js/key.html

If you read that you will notice that every key on your keyword has a number related to it.
Fortunately Ext Js makes it nice and easy for us to handle keyboard key press events through the Ext.KeyMap class.
I’m going to show you a basic key mapping now that just displays an alert box when a key is pressed.

var map = new Ext.KeyMap(document, {
key: ['abc'],
fn: function(e) {
alert('a, b or c pressed');
}
});

This code is pretty straight forward, it keeps an eye out for the user pressing the keys a b or c, whenever that happens the function or fn property of the map is fired. Try it out.
Oh and the e argument there is the character code in an integer format.
There are a couple of examples in the Ext JS API docs for the KeyMap class.

Switching the tabs around.
Ok moving on. This is the cool bit. Firstly we need to set up a KeyMap to establish when a user has used the cursor arrow keys to move tabs, wait, lets make that pressed ctrl and cursor arrow key.
Still that’s pretty simple with Ext.
Here is the KeyMap that we will need. You probably want to wrap this in a Ext.onReady() call.

var map = new Ext.KeyMap(document, {
key: [37, 39],
ctrl: true,
fn: switchTabs
});

There you go, a KeyMap applied to the entire document object to listen for the left cursor arrow (37) and the right cursor arrow (39) and the Ctrl key. When a user presses our key combination the switchTabs function will fire.

The cool thing with these key maps is that you can also use constants instead of the number of the keys. Take a look in the Ext.EventObject class this has a load of pre-defined constants that map to certain keys. We’ll change our code to use these constants rather then the numbers as lefts face facts, it’s not overtly clear what 37 and 39 mean to someone seeing the code for the first time, especially if its not commented.

So the new code now should look like this:

var map = new Ext.KeyMap(document, {
key: [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],
ctrl: true,
fn: switchTabs
});

So the switchTabs function, will have to find the active tab and either increment or decrement its id property by 1.

So all we need are a couple of methods from the TabPanel and we’re away.

Here is the code in full:

function switchTabs(e)
{
// note the items.items - no idea why
var items = tabs.items.items;

// grab the active tab
var active_tab = tabs.getActiveTab();

// grab the total number of tabs
var total_tabs = items.length;

// loop the tabs
for(i = 0 ; i < items.length; i++)
{
// find the active tab based on the id property.
if (active_tab.id == items&#91;i&#93;.id) {
// do we want to move left?
if (e == Ext.EventObject.LEFT)
{
// move left
var next = (i - 1)
if (next < 0) {
// we're at -1, set to last tab
next = (total_tabs - 1);
}
}
else
{
// move right
var next = (i + 1);
if (next >= total_tabs)
{
// we've gone 1 too many set to start position.
next = 0;
}
}
// set the tab and return there's no need to carry on
tabs.setActiveTab(items[next].id);
return;
}
}
}

Give it a try, it’s pretty straight forward, just increments/ decrements or sets the tab to the beginning or end giving the effect of looping through the tabs.

Go forth and Tab up your site :o)